<template>
  <div class="slider-navs">

    <el-menu
        background-color="#304156"
        text-color="#fff"
        active-text-color="#ffd04b"
        :default-active="active"
        router
        class="el-menu-vertical-demo"
    >
      <div class="slider-navs-title">
        <!--      <span>项目信息管理系统</span>-->
        项目信息管理系统
        <!--      <img src="/logo.png" alt="">-->
      </div>
      <el-menu-item :index="item.path" v-for="(item,index) in loginStore.permission " :key="index">
        <component class="icon" :is="item.icon"></component>
        <span>{{item.name}}</span>

      </el-menu-item>
    </el-menu>




  </div>
</template>

<script setup lang="js">
// import House from "@element-plus/icons-vue"
import {ref} from "vue"
import {ChatRound, CopyDocument, House, Orange, Pointer, ShoppingBag, Tools} from "@element-plus/icons-vue";

import {useLoginStore} from "@/stores/loginStore.js"


const  loginStore = useLoginStore()
const active = ref()
if (localStorage.getItem("active")) {
  active.value = localStorage.getItem("active")
}
</script>


<style scoped>

.slider-navs {
  left: 0;
  top: 0;
  bottom: 0;

  position: fixed;
  width: 210px;

  background-color: #304156;

}

.slider-navs-title {
  width: 100%;
  height: 50px;
  background-color: #43546a;
  text-align: center;
  font-size: 15px;
  color: aliceblue;

  line-height: 60px;
}

.icon{
  width: 16px;
  height: 16px;
  margin-right: 5px;
}



</style>